<template>
  <div class="container">
    <div id="div1">
      <div class="inner" v-show="dataList.tasknumber">
        <div>
          <span>Location：{{dataList.passedlocationcode}}</span>
          <span style="margin-left:15px">
            QC：
            <i v-if="dataList.isqualitycontrol==1">YES</i>
            <i v-else>NO</i>
          </span>
        </div>
        <div>
          <span>SKU：{{dataList.productspeccode}}</span>
          <span style="margin-left:15px">×{{dataList.passedqty}}</span>
        </div>
        <svg id="code1" />
      </div>
      <div class="inner" style="margin-top:30px" v-show="dataList.failedtasknumber">
        <div>
          <span>Location：{{dataList.unqualifiedlocationcode}}</span>
          <span style="margin-left:15px">
            QC：
            <i v-if="dataList.isqualitycontrol==1">YES</i>
            <i v-else>NO</i>
          </span>
        </div>
        <div>
          <span>SKU：{{dataList.productspeccode}}</span>
          <span style="margin-left:15px">×{{dataList.unqualifiedqty}}</span>
        </div>
        <svg id="code2" />
      </div>
    </div>
    <el-button type="primary" @click="PreviewMytable()">{{$t('m.print')}}</el-button>
  </div>
</template>

<script>
import { getLodop } from '@/utils/LodopFuncs'
import JsBarcode from 'jsbarcode'
export default {
  name:'printQuality',
  data(){
    return {
      signintasknumber:'',
      dataList:{},
      barCode1:'',
      barCode2:'QC201911050002'
    }
  },

  methods:{
    getGoogInfo(){
      this.$axios({
        method:'get',
        url:`/qc/tasknumber?signintasknumber=${this.signintasknumber}`
      }).then(({data})=> {
        this.dataList = data
        this.barCode1=this.dataList.tasknumber
        this.barCode2=this.dataList.failedtasknumber
        this.barcode()
      })
    },
    barcode(){
      JsBarcode('#code1', this.barCode1, {
        format:'CODE128', //选择要使用的条形码类型
        text:this.barCode1, //显示文本
        displayValue:true, //是否在条形码下方显示文字
        textPosition:'bottom', //设置文本的垂直位置
        background:'#fff', //设置条形码的背景
        font:'微软雅黑', //设置文本的字体
        margin:5 //设置条形码周围的空白边距
      })
      JsBarcode('#code2', this.barCode2, {
        format:'CODE128', //选择要使用的条形码类型
        text:this.barCode2, //显示文本
        displayValue:true, //是否在条形码下方显示文字
        textPosition:'bottom', //设置文本的垂直位置
        background:'#fff', //设置条形码的背景
        font:'微软雅黑', //设置文本的字体
        margin:5 //设置条形码周围的空白边距
      })
    },
    printInit(){
      let LODOP = getLodop()
      LODOP.SET_PRINT_PAGESIZE(1, 1380, 880, '')
      LODOP.PRINT_INIT('打印条码')
      LODOP.ADD_PRINT_HTM(
        100,
        '3%',
        '94%',
        910,
        document.getElementById('div1').innerHTML
      )
    },
    PreviewMytable(){
      let LODOP = getLodop()
      this.printInit()
      LODOP.PREVIEW()
    }
  },

  activated(){
    this.signintasknumber = this.$route.query.signintasknumber
    this.getGoogInfo()
  },
  mounted(){

  }
}
</script>
<style lang='scss' scoped>
.container {
  width: 1000px;
  background: #fff;
  padding: 30px;
}
#div1 {
  text-align: left;
}
#div1 span {
  padding-left: 10px;
}
</style>